<script setup lang="ts">
import AccountSvg from '../svg/accountSvg.vue'
import PasswordSvg from "../svg/passwordSvg.vue";
import VerificationSvg from "../svg/verificationSvg.vue";
import Spin from "../svg/spin.vue"
import {ref} from "vue";
import {reactive} from "vue";
import router from "../Router";
import {testPostRequestParam} from "../network/api.ts";
import {userRegister} from "../network/userApi.ts";

let username = ref("");
let password = ref("");
let checkPassword = ref("");
let count = ref()
let waitSpin = ref(0);

function register(){
  waitSpin.value = 1
  console.log("username.value",username.value)
  console.log("password.value",password.value)
  if(username.value == "" || password.value == ""){
    console.log("can't empty")
    alert("can't empty")
    waitSpin.value = 0
  }else{
    let user_temp = reactive({
          username:username.value,
          password:password.value,
          checkPassword:checkPassword.value
        })
    userRegister(user_temp).then(res=>{
      console.log(res.data)
      if(res.data.message=='注册成功'){
        sessionStorage.setItem("username",username.value)
        alert(res.data.message)
          waitSpin.value = 0
          router.push({
            path:'/login'
          })
      }else{
        console.log(res.data.message)
        alert(res.data.message)
        waitSpin.value = 0
      }
    })
  }
}

function login(){
  router.push({
    path:'/login'
  })
}
</script>

<template>
  <div class="background w-full h-full fixed top-0 left-0
flex flex-col justify-center items-center gap-5"
 >
    <div class="text-8 text-white font-bold select-none fixed top-5 left-10">
      自然资源调查分析平台
    </div>
    <div class="bg-gray-1 w-160 h-110 rounded-xl shadow-gray-5 shadow-lg
    flex flex-col justify-center items-center
">
      <div class="ml-10 text-blue text-7 font-bold select-none">欢迎注册</div>
      <div class="input mt-5 flex flex-col ">
        <div class="account-input h-12 flex justify-center items-center gap-3">
          <account-svg class="w-8 h-8"></account-svg>
          <div class="w-20 flex justify-center"><p class="select-none text-5 text-gray">账号</p></div>
          <input type="text"
                 placeholder="请输入您的用户名"
                 class="h-6 pl-2 rounded-1 outline-none
                 placeholder:text-gray-4 placeholder:text-3
                 border-1 border-solid border-gray-3
                 text-4 text-gray-5"
                 v-model="username"
          />
        </div>
        <div class="password-input h-12 flex justify-center items-center gap-3">
          <password-svg class="w-8 h-8 text-#1296db"></password-svg>
          <div class="w-20 flex justify-center"><p class="select-none text-5 text-gray">密码</p></div>
          <input type="password"
                 placeholder="请输入您的密码"
                 class="h-6 pl-2 rounded-1 outline-none
                 placeholder:text-gray-4 placeholder:text-3
                 border-1 border-solid border-gray-3
                 text-4 text-gray-5"
                 v-model="password"
          />
        </div>
        <div class="checkPassword-input h-12 flex justify-center items-center gap-3">
          <password-svg class="w-8 h-8 text-blue-7"></password-svg>
          <div class="w-20 flex justify-center"><p class="select-none text-5 text-gray">确认密码</p></div>
          <input type="password"
                 placeholder="请再次输入您的密码"
                 class="h-6 pl-2 rounded-1 outline-none
                 placeholder:text-gray-4 placeholder:text-3
                 border-1 border-solid border-gray-3
                 text-4 text-gray-5"
                 v-model="checkPassword"
          />
        </div>
        <button class="mt-5 h-10 text-white bg-blue border-none rounded-1
        hover:bg-blue-5  flex justify-start items-center gap-3 pl-36"
                @click="register"
        >
          <p class="text-5 text-white">注 册</p>
          <Spin class="animate-spin w-5 h-7" v-show="waitSpin==1" ></Spin>

        </button>
        <div class="mt-3 mr-1 text-gray text-4 flex justify-end
select-none hover:text-blue"
        @click="login">
          已有账号，点击进行登录
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.background {
  background-image: url(../assets/bg2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
</style>